<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Language" content="en-us" />
	<title>Dynamic image test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js" type="text/javascript"></script>
  <script src="../cropper.js" type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8">
		
		/**
		 * A little manager that allows us to swap the image dynamically
		 *
		 */
		var CropImageManager = {
			/**
			 * Holds the current Cropper.Img object
			 * @var obj
			 */
			curCrop: null,
			
			/**
			 * Initialises the cropImageManager
			 *
			 * @access public
			 * @return void
			 */
			init: function() {
				this.attachCropper();
			},
			
			/**
			 * Handles the changing of the select to change the image, the option value
			 * is a pipe seperated list of imgSrc|width|height
			 * 
			 * @access public
			 * @param obj event
			 * @return void
			 */
			onChange: function( e ) {
				var vals = $F( Event.element( e ) ).split('|');
				this.setImage( vals[0], vals[1], vals[2] ); 
			},
			
			/**
			 * Sets the image within the element & attaches/resets the image cropper
			 *
			 * @access private
			 * @param string Source path of new image
			 * @param int Width of new image in pixels
			 * @param int Height of new image in pixels
			 * @return void
			 */
			setImage: function( imgSrc, w, h ) {
				$( 'testImage' ).src = imgSrc;
				$( 'testImage' ).width = w;
				$( 'testImage' ).height = h;
				this.attachCropper();
			},
			
			/** 
			 * Attaches/resets the image cropper
			 *
			 * @access private
			 * @return void
			 */
			attachCropper: function() {
				if( this.curCrop == null ) this.curCrop = new Cropper.Img( 'testImage', { onEndCrop: onEndCrop } );
				else this.curCrop.reset();
			},
			
			/**
			 * Removes the cropper
			 *
			 * @access public
			 * @return void
			 */
			removeCropper: function() {
				if( this.curCrop != null ) {
					this.curCrop.remove();
				}
			},
			
			/**
			 * Resets the cropper, either re-setting or re-applying
			 *
			 * @access public
			 * @return void
			 */
			resetCropper: function() {
				this.attachCropper();
			}
		};
		
		
		// setup the callback function
		function onEndCrop( coords, dimensions ) {
			$( 'x1' ).value = coords.x1;
			$( 'y1' ).value = coords.y1;
			$( 'x2' ).value = coords.x2;
			$( 'y2' ).value = coords.y2;
			$( 'width' ).value = dimensions.width;
			$( 'height' ).value = dimensions.height;
		}
		
		// basic example
		Event.observe( 
			window, 
			'load', 
			function() { 
				CropImageManager.init();
				Event.observe( $('removeCropper'), 'click', CropImageManager.removeCropper.bindAsEventListener( CropImageManager ), false );
				Event.observe( $('resetCropper'), 'click', CropImageManager.resetCropper.bindAsEventListener( CropImageManager ), false );
				Event.observe( $('imageChoice'), 'change', CropImageManager.onChange.bindAsEventListener( CropImageManager ), false );
			}
		); 		
	</script>
	<style type="text/css">
		label { 
			clear: left;
			margin-left: 50px;
			float: left;
			width: 5em;
		}
		
		html, body { 
			margin: 0;
		}
		
		#testWrap {
			margin: 20px 0 0 50px; /* Just while testing, to make sure we return the correct positions for the image & not the window */
		}
	</style>
</head>
<body>
	<h2>Dynamic image test</h2>
	<p>
		Test of dynamically changing images or removing & re-applying the cropper
	</p>
	
	<div id="testWrap">
		<img src="castle.jpg" alt="test image" id="testImage" width="500" height="333" />
	</div>
	
	<p>
		<label for="imageChoice">image:</label>
		<select name="imageChoice" id="imageChoice">
			<option value="castle.jpg|500|333">Castle</option>
			<option value="poppy.jpg|311|466">Flower</option>
		</select>
	</p>
	
	<p>
		<input type="button" id="removeCropper" value="Remove Cropper" />
		<input type="button" id="resetCropper" value="Reset Cropper" />
	</p>
	
	
	<p>
		<label for="x1">x1:</label>
		<input type="text" name="x1" id="x1" />
	</p>
	<p>
		<label for="y1">y1:</label>
		<input type="text" name="y1" id="y1" />
	</p>
	<p>
		<label for="x2">x2:</label>
		<input type="text" name="x2" id="x2" />
	</p>
	<p>
		<label for="y2">y2:</label>
		<input type="text" name="y2" id="y2" />
	</p>
	<p>
		<label for="width">width:</label>
		<input type="text" name="width" id="width" />
	</p>
	<p>
		<label for="height">height</label>
		<input type="text" name="height" id="height" />
	</p>  
	
</body>
</html>


